<template>
  <main>
    <div class="top">
      <el-input style="width: 300px;" v-model="input" placeholder="请输入" />
      <el-button type="primary" @click="searchList">
        <i class="el-icon-search"></i>
      </el-button>
    </div>
    <div class="bottom">
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="number" sortable label="序号" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="age" sortable label="年龄" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="role" label="角色" />
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.flag" active-text="正常" inactive-text="禁用" inactive-color="#F56C6C"
              @change="disableUser(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="resetPassword(scope.row)">
              重置密码
            </el-button>
            <el-button size="mini" type="danger" @click="delUser(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination class="page-con" background layout="prev, pager, next, jumper" :page-size="pagesize"
      :current-page="curPage" @current-change="getPageList" :total="total" />
  </main>
</template>

<script>
let allData = []
export default {

  data() {
    return {
      input: '',
      userList: [],
      total: 0,
      pagesize: 5,
      curPage: 1
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    searchList() {
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.$axios.get('/users/backend/search', {
        params: {
          id: userInfo.id,
          searchStr: this.input
        }
      }).then(res => {
        const list = res.data.list
        this.total = list.length
        list.forEach((item, index) => {
          item.number = index
        })
        allData = list
        this.userList = allData.slice((this.curPage - 1) * this.pagesize, this.curPage * this.pagesize)
      })
    },

    // 获取用户列表
    getUserList() {
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.$axios.get('/users/backend/list', {
        params: {
          id: userInfo.id
        }
      }).then(res => {
        if (res?.data?.code === 1) {
          const list = res.data.list
          this.total = list.length
          list.forEach((item, index) => {
            item.number = index
          })
          allData = list
          this.userList = allData.slice((this.curPage - 1) * this.pagesize, this.curPage * this.pagesize)
        }
      })
    },

    getPageList(page) {
      this.curPage = page
      this.userList = allData.slice((this.curPage - 1) * this.pagesize, this.curPage * this.pagesize)
    },

    resetPassword(row) {
      this.$confirm('此操作将重置密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))

        this.$axios.post('/users/backend/reset', {
          id: userInfo.id,
          uid: row.id
        }).then(res => {
          if (res.data.code === 1) {
            this.$message.success('重置成功')
            this.getUserList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    delUser(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))

        this.$axios.post('/users/backend/del', {
          id: userInfo.id,
          uid: row.id
        }).then(res => {
          if (res.data.code === 1) {
            this.$message.success('删除成功')
            this.getUserList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 解禁禁用
    disableUser(row) {
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))

      this.$axios.post('/users/backend/flag', {
        id: userInfo.id,
        uid: row.id
      }).then(res => {
        if (res.data.code === 1) {
          // this.$message.success('删除成功')
          this.getUserList()
        }
      })
    }
  }
}
</script>

<style>
.top {
  padding: 20px 0;
}

.page-con {
  margin-top: 20px;
  float: right;
}
</style>
